import React, { Component } from 'react'

export default class Chat extends Component {
  state={
    msge:['你好呀','？？？？？'],
    keyword:''
  }
  save=(e)=>{
    this.setState({
      keyword:e.target.value
    })
  }

  send=()=>{
    let {keyword,msge}=this.state
    this.setState({
      msge:[...msge,keyword]
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.keyword} onChange={this.save} /><button onClick={this.send}>发送</button>
        <hr />
        <div ref={el=>this.div=el} style={{width: 400, height: 250, border: 'solid 1px #456',overflow:'scroll'}}>
          <ul>
            {this.state.msge.map((item,index)=>{
              return <li key={index}>{item}</li>
            })}
          </ul>
        </div>
      </div>
    )
  }
  componentDidUpdate(){
    this.div.scrollTop=this.div.scrollHeight
  }
}
